<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
  <title>Document</title>
</head>

<body>
  <div id="app">
    <h2>{{name}}</h2>
    <h1>{{num}}</h1>
    <button @click="num++">+1</button>
  </div>
  <script>
    let vm = new Vue({
      el: "#app",
      // 1)初始化methods中的方法和初始化生命周期的钩子函数
      beforeCreate() {
        // 不能获取data中的数据    基本项目中没有   在React中，所有的钩子函数都有用，在Vue中，有些钩子函数基本上没有
        console.log("beforeCreate.....");
      },
      // 2）注入一些数据，初始化响应式系统，响应式系统是发生创建组件实例阶段
      created() {
        console.log("created.....");
        // 1）发ajax请求  2）获取路由参数...  
      },
      // 找模板  先看有没有el选项，如果有，再看有没有template选项，如果有，template就是模板，如果没有，el的Outhtml就是模块。会把模板变成render函数，内部会调用render函数，生成虚拟DOM。虚拟DOM转化成真实DOM，进行挂载。
      beforeMount() {
        // 在项目中，基本上没什么用
        console.log("beforeMount.....");
      },
      // 1）发ajax请求  2）开定时器  3）DOM操作  4）建立ws连接   5）实例化echarts实例  .... 
      mounted() {
        console.log("mounted.....");
      },
      // 数据变化，一定会触发beforeUpdate
      // 监听器：数据变化，也可以监听到
      // 监听器能实例的逻辑，按理说在beforeUpdate和updated也可以实现，只不过代码逻辑就复杂
      // 在React中，是没有监听器的，在React中监听器就是靠ComponentUpdated
      beforeUpdate() {
        console.log("beforeUpdate.....");
      },
      // 要生成新的虚拟DOM，新的虚拟DOM和老的虚拟DOM就会进行DIFF算法对比差异
      // 通过patch，会找到两个虚拟DOM树的最小差异，找到后，进行异步更新  
      // nextTick有什么用？....
      // 当v-for时，为什么要加key？ 有了唯一的key，就可以尽快的找到的新旧虚拟DOM树的差异，快速更新DOM。
      updated() {
        // 基本上不用，假如没有监听器，数据变化我们要做一些事件，只能像React一样，逻辑只能写在Updated中
        // 在updated中不能更新数据了，会导致死循环
        console.log("updated.....");
      },
      // 什么操作会导致组件销毁？
      // 1）手动调用  $destory()
      // 2）路由切换
      //    keep-alive 动态组件  ....
      beforeDestroy() {
        // 清空定时器   解除事件绑定   清缓存... 
        console.log("beforeDestroy.....");
      },
      // 移除当前组件的watcher  
      // 移除所有的子组件
      // 移除所有监听器
      // 数据变了，响应式系统就失效了，DOM就无法更新了。
      destroyed() {
        console.log("destroyed.....");
      },
      data() {
        return {
          name: "码路",
          num: 0
        }
      }
    });
  </script>
</body>

</html>